<template>
  <q-dialog v-model="visible">
    <q-card style="min-width: 20vw">
      <q-card-section
        class="text-h6"
        :class="$q.dark.isActive ? '' : 'text-black'"
      >
        "{{ role.roleName }}"{{ $t(lang + "text1") }}
        <q-btn
          icon="close"
          dense
          flat
          round
          v-close-popup
          class="float-right"
        />
      </q-card-section>
      <q-separator />
      <div class="q-pa-lg">
        <!--  树状    -->
        <tree-select
          :simple="simple"
          v-model="ticked"
          :ticked="ticked"
          class="col-12 col-sm-6"
        />
      </div>
      <q-slide-transition>
        <div class="bg-primary">
          <q-btn
            no-caps
            unelevated
            class="full-width text-subtitle1 text-bold"
            color="primary"
            :label="$t(lang + 'text2')"
            @click="confirm"
          />
        </div>
      </q-slide-transition>
    </q-card>
  </q-dialog>
</template>

<script setup>
import { ref } from "vue";
import TreeSelect from "components/user/TreeSelect.vue";
import routerLinks from "src/router/routerLinks";
import { useFunctionsStore } from "stores/functions";
import { useQuasar } from "quasar";
import { useI18n } from "vue-i18n";

const t = useI18n().t;
const lang = "userIndex.SetAuthority.";
const $q = useQuasar();
const emit = defineEmits(["update"]);
const visible = ref(false);
// 选中的模块
const ticked = ref([]);
// 获取当前模式下的模块
const appList = routerLinks(useFunctionsStore().mode);
// 渲染树选择表数据
const simple = ref([
  {
    title: t(lang + "text3"),
    children: appList,
  },
]);
const role = ref({});

// 显示弹窗并获得数据
function show(data) {
  ticked.value = [];
  visible.value = true;
  role.value = data;
  if (!role.value.info) return;
  // 将字符串转json
  const info = JSON.parse(role.value.info);
  // 没有数据时不操作
  info.forEach((item) => {
    ticked.value.push(item.title);
  });
}

// 确认修改
function confirm() {
  if (ticked.value.length === 0)
    return $q.notify({ type: "warning", message: t(lang + "text4") });
  const moduleList = [];
  appList.forEach((item) => {
    ticked.value.forEach((data) => {
      if (item.title === data) {
        moduleList.push(item);
      }
    });
  });
  // 存储在角色信息里面
  role.value.info = JSON.stringify(moduleList);
  emit("update", role.value);
  visible.value = false;
}

defineExpose({ show });
</script>

<style scoped></style>
